<template>
  <div class="main-content">
    <!-- 列表页 -->
    <div v-if="showFlag">
      <el-form :inline="true" :model="searchForm" class="form-content">
        <el-row :gutter="20" class="slt">
          <el-form-item label="设备编号">
            <el-input v-model="searchForm.shebeibianhao" placeholder="设备编号" clearable></el-input>
          </el-form-item>
          <el-form-item label="设备名称">
            <el-input v-model="searchForm.shebeimingcheng" placeholder="设备名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="设备类型">
            <el-input v-model="searchForm.shebeileixing" placeholder="设备类型" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
            <el-button type="success" @click="addOrUpdateHandler()">新增</el-button>
            <el-button type="danger" :disabled="dataListSelections.length <= 0" @click="deleteHandler()">删除</el-button>
          </el-form-item>
        </el-row>
      </el-form>
      <div class="table-content">
        <el-table class="tables" :data="dataList" border @selection-change="selectionChangeHandler">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column type="index" label="索引" width="50" align="center" />
          <el-table-column prop="shebeibianhao" label="设备编号" align="center" />
          <el-table-column prop="shebeimingcheng" label="设备名称" align="center" />
          <el-table-column prop="shebeileixing" label="设备类型" align="center" />
          <el-table-column prop="zhuangtai" label="是否在线" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.zhuangtai === '在线' ? '是' : '否' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="shuliang" label="数量" align="center" />
          <el-table-column prop="zhuyishixiang" label="注意事项" align="center" />
          <el-table-column label="操作" align="center" width="180">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">编辑</el-button>
              <el-button type="danger" size="mini" @click="deleteHandler(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="margin-top:20px;"
          :current-page="pageIndex"
          :page-size="pageSize"
          :total="totalPage"
          layout="total, prev, pager, next, jumper"
          @current-change="currentChangeHandle"
          @size-change="sizeChangeHandle"
          :page-sizes="[10, 20, 50]"
          background
        />
      </div>
      <add-or-update v-if="addOrUpdateFlag" :parent="this" ref="addOrUpdate"></add-or-update>
    </div>
  </div>
</template>
<script>
import AddOrUpdate from "./add-or-update";
import { getShebeiList, deleteShebei } from '@/utils/shebeixinxiLocal';
export default {
  data() {
    return {
      searchForm: { shebeibianhao: '', shebeimingcheng: '', shebeileixing: '' },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListSelections: [],
      showFlag: true,
      addOrUpdateFlag: false,
    };
  },
  created() {
    this.getDataList();
  },
  components: { AddOrUpdate },
  methods: {
    search() {
      this.pageIndex = 1;
      this.getDataList();
    },
    getDataList() {
      let list = getShebeiList();
      if (this.searchForm.shebeibianhao) list = list.filter(i => i.shebeibianhao && i.shebeibianhao.toString().includes(this.searchForm.shebeibianhao));
      if (this.searchForm.shebeimingcheng) list = list.filter(i => i.shebeimingcheng && i.shebeimingcheng.includes(this.searchForm.shebeimingcheng));
      if (this.searchForm.shebeileixing) list = list.filter(i => i.shebeileixing && i.shebeileixing.includes(this.searchForm.shebeileixing));
      this.totalPage = list.length;
      const start = (this.pageIndex-1)*this.pageSize;
      this.dataList = list.slice(start, start+this.pageSize);
    },
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.getDataList();
    },
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    selectionChangeHandler(val) {
      this.dataListSelections = val;
    },
    addOrUpdateHandler(id) {
      this.addOrUpdateFlag = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },
    deleteHandler(id) {
      let ids = id ? [id] : this.dataListSelections.map(item => item.id);
      if (ids.length === 0) return;
      this.$confirm('确定要删除选中项吗？', '提示', { type: 'warning' }).then(() => {
        deleteShebei(ids);
        this.getDataList();
        this.$message.success('删除成功');
      });
    },
  }
}
</script>
